<template>
    <div class="bigBox" v-show="!showDetail">
        <div class="body">
            <Select :types="types" @getData="changeType"></Select>
            <div class="imgs">
                <ImgList :imgList="imgList" @viewPicture="viewPicture" :mobile="true" :loading="loading"></ImgList>
            </div>
        </div>
        <div class="change">
            <b @click="getMobileImgsList">{{ order == 'new' ? '最新' : '热门' }}</b>
        </div>
    </div>
    <Detail v-if="showDetail" @closePicture="closePicture" :urls="imgList" :index="index">
    </Detail>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { getImgClassifyImgs, getImgClassify } from '@renderer/api/mohu'
import ImgList from '@renderer/components/imgList.vue'
import Detail from '@renderer/components/detail.vue'
import _ from 'lodash'
import Select from '@renderer/components/select.vue'
const loading = ref(false)
const types: any = ref([])

const page = ref(1)
const size = ref(15)
const type = ref('')
const imgList: any = ref([])
const index = ref(0)
const showDetail = ref(false)
let ImgBody: Element
const order = ref('new')

const changeType = (newType: string) => {
    if (type.value == newType) return
    type.value = newType
    page.value = 1
    imgList.value = []
    getNetImgList()
}
const getMobileImgsList = () => {
    if (order.value == 'new') {
        order.value = 'hot'
    } else {
        order.value = 'new'
    }
    page.value = 1
    imgList.value = []
    getNetImgList()
}
const getNetImgList = async () => {
    loading.value = true
    const obj = {
        limit: size.value,
        adult: true,
        first: 1,
        order: order.value,
        skip: (page.value - 1) * size.value,
        id: type.value
    }
    const res = await getImgClassifyImgs(obj)
    res.res.vertical.forEach(el => {
        const obj1 = {
            src: el.img,
            source: el.preview,
            title: el.tag.join(" ")
        }
        imgList.value.push(obj1)
    })
    loading.value = false
}
const getTypes = async () => {
    const res = await getImgClassify()
    res.res.category.forEach((item: any) => {
        const obj = {
            label: item.name,
            value: item.id
        }
        types.value.push(obj)
    })
    type.value = types.value[0].value
    getNetImgList()
}

const viewPicture = (num: number) => {
    index.value = num
    showDetail.value = true
}
const closePicture = () => {
    showDetail.value = false
}
const scrollEvent = _.debounce(() => {
    const scrollBottom = ImgBody.scrollHeight - ImgBody.scrollTop - ImgBody.clientHeight
    if (scrollBottom < 200) {
        page.value++
        getNetImgList()
    }
}, 200)
onMounted(() => {
    getTypes()
    ImgBody = document.querySelector('.imgs')!
    ImgBody.addEventListener('scroll', scrollEvent)
})
onBeforeUnmount(() => {
    ImgBody.removeEventListener('scroll', scrollEvent)
})
</script>

<style scoped lang="scss">
.bigBox {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;

    .body {
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-columns: 70px 1fr;
        gap: 5px;

        .types {
            overflow-y: auto;

            .type {
                text-align: center;
                cursor: pointer;
                margin-top: 5px;
                transition: all 0.3s;
                user-select: none;

                &:hover {
                    background-color: #29f;
                    color: white;
                }
            }

            .active {
                background-color: #29f;
                color: white;
            }
        }

        .imgs {
            overflow-y: auto;
            @include mixin.scroll_bar();
        }
    }

    .change {
        position: absolute;
        right: 20px;
        top: 5px;
        z-index: 999;
        cursor: pointer;
        user-select: none;
        color: white;
        font-size: 15px;
        transition: all 0.3s;
        padding: 2px 10px;
        border-radius: 50%;
        background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 100%);

        &:hover {
            color: #29f;
        }
    }
}
</style>